* {
box-sizing: border-box;
}
body {
background-color: #161622;
display: grid;
place-items: center;
height: 100vh;
}
.configure-border-1 {
width: 115px;
height: 115px;
padding: 3px;
position: absolute;
background: #00bcd4;
animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}
.configure-border-2 {
width: 115px;
height: 115px;
padding: 3px;
background: #8bc34a;
transform: rotate(45deg);
animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}
.configure-core {
width: 100%;
height: 100%;
background-color: #161622;
}
@keyframes configure-clockwise {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes configure-xclockwise {
0% {
transform: rotate(45deg);
}
25% {
transform: rotate(-45deg);
}
50% {
transform: rotate(-135deg);
}
75% {
transform: rotate(-225deg);
}
100% {
transform: rotate(-315deg);
}
}